<template>
  <div class="header">
    <div class="top">
      <router-link class="box" to="mymine">
        <div class="iconfont icon-zuojiantou"></div>
        <div class="back">返回</div>
      </router-link>
      <div class="text">安全中心</div>
    </div>
    <div class="middle">
      <div class="bg"></div>
    </div>
    <div class="bottom">
      <div class="xiugai">
        <van-cell is-link @click="showxiugai" class="password"
          >修改密码</van-cell
        >
        <van-popup
          v-model="show"
          position="bottom"
          :style="{ height: '30%' }"
          class="popup"
        >
          <van-form @submit="onSubmit">
            <van-field
              v-model="oldPassword"
              name="旧密码"
              label="旧密码"
              placeholder="旧密码"
              :rules="[{ required: true, message: '请填写旧密码' }]"
            />
            <van-field
              v-model="newPassword"
              type="password"
              name="新密码"
              label="新密码"
              placeholder="新密码"
              :rules="[{ required: true, message: '请填写新密码' }]"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="myxiugai"
              >
                <div class="submit" to="mylogin">提交</div>
              </van-button>
            </div>
          </van-form>
        </van-popup>
      </div>
      <div class="zuxiao">
        <van-cell is-link @click="showzuxiao" class="password"
          >注销账号</van-cell
        >
        <van-popup
          v-model="zuxiao"
          closeable
          close-icon="close"
          round
          close-icon-position="top-right"
          class="close"
        >
          <div class="zuxiaobox">
            <div class="title">注销账号</div>
            <div class="content">是否确定注销账号，一旦注销无法恢复！</div>
            <div class="function">
              <div class="cancel" @click="myquxiao">取消</div>
              <div class="submit" @click="myzuxiao">确定</div>
            </div>
          </div>
        </van-popup>
      </div>
      <div class="tuichu">
        <button class="exit" @click="myexit()">退出登录</button>
        <van-popup
          v-model="tuichu"
          closeable
          close-icon="close"
          round
          close-icon-position="top-right"
          class="tuibox"
        >
          <div class="title">提示</div>
          <div class="content">是否退出登录</div>
          <div class="function">
            <div class="cancel">取消</div>
            <div class="submit">确定</div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.header {
  position: relative;
  .top {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    .box {
      display: flex;
      .iconfont {
      }
      .back {
      }
    }
    .text {
      margin-left: 120px;
    }
  }
  .middle {
    .bg {
      width: 100%;
      height: 100px;
      background-color: #0c34ba;
    }
  }
  .bottom {
    width: 98%;
    margin-left: 3px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 100px;
    border-radius: 20px;
    .xiugai {
      .password {
      }
      .popup {
      }
    }
    .zuxiao {
      .password {
      }
      .close {
        .zuxiaobox {
          width: 250px;
          height: 130px;
          .title {
            margin-top: 10px;
            text-align: center;
            height: 40px;
            line-height: 40px;
          }
          .content {
            margin: 10px 10px;
          }
          .function {
            width: 100%;
            display: flex;
            justify-content: space-around;
            .cancel {
            }
            .submit {
              color: #0c34ba;
            }
          }
        }
      }
    }
    .tuichu {
      .exit {
        margin-top: 100px;
        margin-left: 18px;
        color: white;
        width: 90%;
        height: 50px;
        outline: none;
        border-radius: 20px;
        background-color: #0c34ba;
      }
      .tuibox {
        width: 250px;
        height: 130px;
        .title {
          text-align: center;
          height: 30px;
          line-height: 30px;
        }
        .content {
          text-align: center;
          margin: 10px 10px;
        }
        .function {
          display: flex;
          justify-content: space-around;
          margin-top: 30px;
          .cancel {
          }
          .submit {
            color: #0c34ba;
          }
        }
      }
    }
  }
}
</style>


<script>
import "@/assets/fonts/iconfont.css";
export default {
  name: "guanli",
  data() {
    return {
      zuxiao: false,
      show: false,
      tuichu: false,
      oldPassword: "",
      newPassword: "",
      tokenString: null,
      show1: "",
      visible: true,
    };
  },

  methods: {
    showxiugai() {
      this.show = true;
    },
    myquxiao() {
      let _this = this;
      _this.$toast("取消成功");
    },
    myxiugai() {
      let _this = this;
      this.tokenString = window.localStorage.getItem("token_list");
      console.log(this.tokenString);
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: this.tokenString,
        password: this.newPassword,
        oldPassword: this.oldPassword,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/updatePassword", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          _this.$toast("修改成功");
          _this.$router.push("/mylogin");
          console.log(this);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showzuxiao() {
      this.zuxiao = true;
    },
    myzuxiao() {
      let _this = this;
      this.tokenString = window.localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: this.tokenString,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/destroyAccount", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          _this.$toast("注销成功");
          console.log("注销信息", res);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showtuichu() {
      this.tuichu = true;
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    myexit() {
      this.$toast("退出成功");
      this.$router.push("/mylogin");
      localStorage.removeItem("token_list");
    },
  },
};
</script>